<template>
  <el-card shadow="never">
    <template #header><span>员工列表（静态 12 条）</span></template>
 


    <!-- 2. 表格 -->
    <MyVxeGrid
      :show-toolbar="false"
      :show-search="true"
      :table-data="ALL_DATA"
      :table-columns="columns"
      v-model:page="pagerConfig"   
      :row-class-name="handleMyRowClass"
      @selection-change="handleSelectionChange"
      height="700"
    >
      <template #toolbar-left>
        <el-button type="primary" icon="Plus">新增</el-button>
      </template>
      <template #toolbar-right>
        <el-button icon="Refresh">刷新</el-button>
      </template>
    </MyVxeGrid>
  </el-card>
</template>

<script setup lang="ts">
import { ref,computed } from 'vue'
import MyVxeGrid from '@/components/ActionVxeGridCont.vue'


/* ---------- 全部 12 条（一次性给 grid） ---------- */
const ALL_DATA = ref([
  { id: 1, name: '张三', age: 28, department: '技术部' },
  { id: 2, name: '李四', age: 32, department: '市场部' },
  { id: 3, name: '王五', age: 24, department: '技术部' },
  { id: 4, name: '赵六', age: 38, department: '人事部' },
  { id: 5, name: '钱七', age: 29, department: '技术部' },
  { id: 6, name: '孙八', age: 26, department: '市场部' },
  { id: 7, name: '周九', age: 31, department: '人事部' },
  { id: 8, name: '吴十', age: 27, department: '技术部' },
  { id: 9, name: '郑一', age: 33, department: '技术部' },
  { id: 10, name: '王二', age: 25, department: '市场部' },
  { id: 11, name: '张三丰', age: 36, department: '人事部' },
  { id: 12, name: '李小明', age: 29, department: '技术部' }
])

/* ---------- 列配置 ---------- */
const columns  = [
  { type: 'checkbox', width: 60 },
  { type: 'seq', title: '序号', width: 60 , hide: true},
  { field: 'name', title: '姓名', width: 120, sortable: true },
  { field: 'age', title: '年龄', width: 100, sortable: true },
  { field: 'department', title: '部门', width: 140 }
]

 

 

/* ---------- 分页参数 ---------- */
const pagerConfig = ref({
  currentPage: 1,
  pageSize: 5,
  pageSizes: [5, 10, 20],
  //total: computed(() => filteredData.value.length)
   total: ALL_DATA.value.length
})

const handleSelectionChange = (selection) => {
  console.log('选中:', selection)

  // 在这里添加您需要的业务逻辑
  // 例如：
  // - 显示行详情
  // - 跳转到编辑页面
  // - 弹出操作菜单等
}
 
// 行类名函数
const handleMyRowClass = ({ row, rowIndex }) => {
 //  stripe="true" 下面语句会失效，若下面生效必须改stripe="false"
// 年龄大于38岁的行 - 高亮为黄色
  if (row.age >= 38) {
    return 'bg-yellow-300'
  }
  // 奇数行
  else if (rowIndex % 2 === 0) {
    return 'bg-gray-100'
  }
  // 偶数行
  else {
    return 'bg-white'
  }
}


</script>
